<template>
  <view class="container">
    <!--mescorll body 无需配置pages.json中的下拉支持-->
    <mescroll-body @init="mescrollInit" :down="{ auto: false }" @down="onDown" @up="onUp" :up="{ toTop: { src: '' } }">
      <!--搜索框-->
      <uni-nav-bar :border="false" fixed :leftWidth="0" rightWidth="70px">
        <view class="input">
          <uni-easyinput
              prefixIcon="search"
              :clearable="true"
              trim="all"
              v-model="queryForm.eqptNo"
              placeholder="搜索：设备编号"
              @confirm="search"
              @clear="search"
          />
        </view>
        <template #right>
          <view class="nav-right" @click="search">
            <uni-icons type="search" size="30"></uni-icons>
            <view class="nav-right-name"> 搜索 </view>
          </view>
        </template>
      </uni-nav-bar>

      <view class="list-view">
        <view class="item" v-for="(item, index) in listData" :key="index">
          <view class="header">
            <view class="header-left">
              <image class="header-left-image" src="/static/images/pure-list/maintain.png" mode=""></image>
              <view class="header-left-title"> {{ item.eqptNo}} </view>
            </view>
            <view class="header-right-id"> {{ getDictLabel('faultType', item.faultType) }} </view>
          </view>
          <view class="footer">
            <view class="footer-item">
              <view class="label"> 机构名称：</view>
              <view class="info"> {{ item.orgName }} </view>
            </view>
            <view class="footer-item">
              <view class="label"> 问题描述：</view>
              <view class="info"> {{ item.faultDescription }} </view>
            </view>
            <view class="footer-item">
              <view class="label">问题原因：</view>
              <view class="info"> {{ item.faultReason }}</view>
            </view>
            <view class="footer-item">
              <view class="label"> 维护人员： </view>
              <view class="info"> {{ item.solutionStaff }} </view>
            </view>
            <view class="footer-item">
              <view class="label"> 发生时间： </view>
              <view class="info"> {{ item.occurrenceTime }} </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>

  </view>
</template>


<script setup>
  import { reactive, ref } from 'vue';
  import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app';
  import useMescroll from '@/uni_modules/uni-mescroll/hooks/useMescroll';
  import { smartSentry } from '@/lib/smart-sentry';
  import { eqptApi } from "@/api/business/dobi/eqpt-api";
  import { useDictStore } from '@/components/dict-select/dict';



  const defaultForm = {
    eqptNo: '',
    pageNum: 1,
    pageSize: 10,
  };

  // 查询表单
  const queryForm = reactive({ ...defaultForm });

  // 列表数据
  const listData = ref([]);


  function buildQueryParam(pageNum) {
    return Object.assign({}, queryForm, { pageNum:pageNum});
  }

  async function query(mescroll, isDownFlag, param) {
    try {
      console.log("params",param);
      let res = await eqptApi.pageEqptFaultList(param);

      /*
       * 上拉式加载更多(isDownFlag=false)时，需要将新数据追加到原有数据listData中
       * 下拉刷新(isDownFlag=true)时，需要将新数据赋值给listData
       */
      if (!isDownFlag) {
        listData.value = listData.value.concat(res.result.records);
      } else {
        listData.value = res.result.records;
      }

      mescroll.endBySize(res.result.records.length,res.result.total);
    } catch (e) {
      smartSentry.captureError(e);
      //联网失败, 结束加载
      mescroll.endErr();
    }
  }

  const { mescrollInit, getMescroll } = useMescroll(onPageScroll, onReachBottom);

  /**
   * 搜索
   */
  function search() {
    query(getMescroll(), true, buildQueryParam(1));
    uni.pageScrollTo({
      scrollTop: 0,
    });
  }

  /**
   * 下拉刷新
   */
  function onDown(mescroll) {
    queryForm.pageNum = 1;
    query(mescroll, true, buildQueryParam(1));
  }

  /**
   * 上拉加载更多
   */
  function onUp(mescroll) {
    query(mescroll, false, buildQueryParam(mescroll.num));
  }

  onShow(() => {
    search();
  });

  // 缓存在pinia的字典数据
  const dictStore = useDictStore();

  /**
   * 获取字典标签
   * @param dictType
   * @param dictValue
   */
  const getDictLabel = (dictType, dictValue) => dictStore.getDictLabel(dictType, dictValue);

  //console.log("**************************",getLabel( 'faultType', 1));

</script>

<style lang="scss" scoped>
  .container {
    background-color: #f4f4f4;
  }
  .input {
    width: 100%;
    height: 60rpx;
    background: #f7f8f9;
    border-radius: 4px;
    margin: 8rpx 0;
    display: flex;
    align-items: center;
  }

  .list-view {
    margin: 20rpx 24rpx;
  }
  .item {
    position: relative;
    width: 700rpx;
    margin: 20rpx auto 0;
    background: #ffffff;
    border-radius: 12rpx;
    box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
    padding: 26rpx 40rpx 20rpx;
    box-sizing: border-box;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #ededed;
      margin-bottom: 16rpx;

      .header-left {
        display: flex;
        align-items: center;
        .header-left-image {
          width: 48rpx;
          height: 48rpx;
          margin-right: 16rpx;
        }
        .header-left-title {
          font-size: 34rpx;
          font-weight: bold;
          color: #444444;
        }
      }
      .header-right-id {
        font-size: 28rpx;
        color: #777777;
      }
    }

    .footer {
      .footer-item {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
        .label {
          width: 80px;
          font-size: 28rpx;
          color: #777777;
        }
        .info {
          font-size: 28rpx;
          color: #323333;
          font-weight: bold;
        }
      }
    }
  }
</style>
